<template>
	<view class="cource-class-card view-hover" v-for="item in props.list" :key="item.id">
		<view class="cource-card-main" @click="toDetail(item)">
			<view class="cource-card-left">
				<view v-if="item.isMember > 0">VIP</view>
				<image :src="item.courseCover"/>
			</view>
			<view class="cource-card-right">
				<view class="cource-card-title">{{item.courseName}}</view>
				<view class="cource-card-desc u-line-2">{{item.firstCategoryName}}</view>
				<view class="cource-card-data">
					<view class="cource-card-tag" v-if="item.isMember > 0">会员享</view>
					<view class="cource-card-money">¥{{item.discountPrice}}</view>
					<view class="cource-card-num" v-if="item.clicks > 0">{{formateNum(item.clicks)}}人学习</view>
				</view>
			</view>
		</view>
		<view class="cource-card-line"></view>
	</view>
</template>

<script setup>
	import {defineProps} from 'vue'
	import {formateNum} from '../../utils/format.js'
	const props = defineProps({
		list: Array
	})
	const toDetail = (item) => {
		uni.navigateTo({
			url:'/pages/detail/index?courseId=' + item.id
		})
	}
</script>

<style lang="scss" scoped>
	.cource-class-card {
		&:not(:nth-child(1)){
			margin-top: 20rpx;
		}
		.cource-card-line{
			height: 1px;
			background-color: #f4f4f5;
			margin-top: 20rpx;
		}
		.cource-card-main{
			display: flex;
			justify-content: space-between;
		}
		.cource-card-left {
			width: 300rpx;
			height: 200rpx;
			margin-right: 20rpx;
			position: relative;
			>view {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
				background-color: #fa6602;
				border-radius: 0 10rpx 0 15rpx;
				width: 40rpx;
				color: #fff;
				font-size: 20rpx;
				font-style: italic;
			}
	
			>image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
	
		.cource-card-right {
			flex: 1;
			.cource-card-title {
				font-size: 30rpx;
			}
	
			.cource-card-desc {
				color: #d1d1d1;
				font-size: 25rpx;
				margin: 15rpx 0;
				line-height: 1.5;
				min-height:80rpx;
			}
	
			.cource-card-data {
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
	
			.cource-card-tag {
				color: #fff;
				background-color: #fb8b86;
				padding: 5rpx 10rpx;
				height: 30rpx;
				line-height: 30rpx;
				border-radius: 30rpx 0;
				font-size: 20rpx;
				margin-right: 20rpx;
			}
	
			.cource-card-money {
				color: red;
				margin-right: 20rpx;
				
			}
	
			.cource-card-num {
				color: #d1d1d1;
				font-size: 20rpx;
			}
		}
	}
</style>